<template>
  <div>
    <div class="title time">
      <h3>{{this.$store.state.bm}}</h3>
      <p>当前时间：{{time}}</p>
    </div>
    <!-- 签到统计 -->
    <div class="one">
      <div class="box" v-for="(val,key) in qdqk" :key="key">
        <p>{{key}}</p>
        <p class="number">{{val}}</p>
      </div>
    </div>
    <div class="title">
      <h3>{{cqqkTitle}}</h3>
    </div>
    <!-- 出勤情况 -->
    <div class="one">
      <div class="box box2" v-for="(val,key) in cqqk" :key="key">
        <p>{{key}}</p>
        <p class="number">{{val}}</p>
      </div>
      <div class="box box2">
        <p>今日午餐预定人数</p>
        <p class="number">{{pernum}}</p>
      </div>
    </div>

    <div class="title">
      <h3>签到情况列表</h3>
      <div class="btnBox">
        <p :class="[status=='未签到'?'p-active':'']" @click="status='未签到';searchList()">未签到</p>
        <p :class="[status=='已签到'?'p-active':'']" @click="status='已签到';searchList()">已签到</p>
      </div>
    </div>
    <!-- 时间+部门+关键字查询 -->
    <!-- <div class="searchBox">
      <div class="dateSearch">
        <el-radio v-model="radio" :label="true" @click.native="dateValue='';flag=true">全部时间段</el-radio>
        <el-radio
          v-model="radio"
          :label="false"
          @click.native="flag=false"
          style="margin-left:-14px;"
        >指定时间段</el-radio>
        <el-date-picker
          :disabled="flag"
          class="picker"
          size="small"
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div class="bmtype">
        <span>部门筛选：</span>
        <el-select
          class="bm-input"
          v-model="bm"
          size="small"
          multiple
          collapse-tags
          style="margin-left: 20px;"
          :placeholder="this.$store.state.power<=0?'所有部门':this.$store.state.bm"
          :disabled="this.$store.state.power<=0?false:true"
        >
          <el-option v-for="(item,index) in bmType" :key="item" :label="item" :value="++index"></el-option>
        </el-select>
      </div>
      <div class="textSearch">
        <div class="textSearchSun">
          <el-input
            size="small"
            placeholder="请输入关键字"
            prefix-icon="el-icon-search"
            v-model="textSearch"
          ></el-input>
          <el-button @click="searchList(1)" size="small" type="primary" style="margin-left:6px;">查询</el-button>
        </div>
      </div>
    </div>-->
    <div class="searchCount">
      <div>{{searchCount}}</div>
      <div>
        <!-- <el-link @click="getExcel" style="font-size:14px;" type="success">导出为Excel</el-link> -->
      </div>
    </div>
    <!-- 未签到人数据表格 -->
    <div class="dataList">
      <el-table
        :data="tableData"
        size="medium"
        stripe
        border
        :header-cell-style="headClass"
        :cell-style="tableClass"
        style="width: 100%"
      >
        <el-table-column prop="date" :formatter="dateFt" label="日期" min-width="100"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="90">
          <template slot-scope="scope">
            <div :style="[cpDate(scope.row.date,scope.row.created)]">{{scope.row.status}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="90"></el-table-column>
        <el-table-column prop="bmstr" label="部门名称" min-width="130"></el-table-column>
        <el-table-column
          v-if="status=='已签到'"
          :formatter="dateFormat"
          prop="created"
          label="签到时间"
          min-width="150"
        ></el-table-column>
        <el-table-column v-if="status=='已签到'" prop="formId" min-width="130">
          <template slot="header" slot-scope="scope">
            <i class="el-icon-share"></i>
            <span>&nbsp;区块链号&nbsp;</span>
            <i class="el-icon-question" @mouseenter="tipshow=true" @mouseleave="tipshow=false"></i>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="id" width="90"></el-table-column>
      </el-table>
      <div class="tip" v-show="tipshow">此表单记录以上链,以数据化存证，保证不可篡改的特性。</div>
    </div>

    <div class="pager">
      <el-pagination
        small
        background
        layout="prev ,pager,next"
        :total="pagesizeCount"
        :pager-count="7"
        :page-size="pagesize"
        :current-page.sync="currpage"
        @current-change="getNewlist(currpage)"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tipshow: false, //区块链号提示框
      time: "",
      qdqk: "", //签到情况
      cqqk: "", //出勤情况
      pernum: "", //订餐人数
      cqqkTitle: "", //今日出勤情况：标题
      status: "未签到", // 未签到/已签到
      radio: false, //指定时间段
      flag: false, //日期选择器禁用
      textSearch: "", //关键字查询
      dateValue: [new Date(), new Date()], //日期时间
      bm: [], //部门筛选
      tableData: [], // 数据列表
      currpage: 1, //当前页码
      pagesize: 15, //每页展示数目
      pagesizeCount: 0, //总条数
      searchCount: "", //查询到数量
      dialog: false,
      //筛选数据
      screenList: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //快捷日期选项
      bmType: [], //部门

      signTime: 8.5, //签到时间点(10进制)
      onTimeColor: "#67c23a", //准时颜色
      timeOutColor: "#409EFF", //超时颜色
      noCheckColor: "#f56c6c" //未签到颜色
    };
  },
  created() {
    this.$axios
      .get("/api/getBmStrList")
      .then(res => {
        this.bmType = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted() {
    this.getTime();
    this.getData();
    this.getData2();
    this.searchList();
  },
  methods: {
    //日期比较
    cpDate(date1, date2) {
      if (date2) {
        let t1 = new Date(date1.replace(/-/g, "/"));
        let t2 = new Date(date2.replace(/-/g, "/"));
        if (
          t2.getTime() <=
          t1.getTime() + this.signTime * 60 * 60 * 1000 + 59 * 1000
        ) {
          return { color: this.onTimeColor };
        } else {
          return { color: this.timeOutColor };
        }
      }
      return { color: this.noCheckColor };
    },
    //获取出勤情况数据块
    getData() {
      this.$axios
        .get("/api/data/indexCount?p=" + this.$store.state.power)
        .then(res => {
          this.qdqk = res.data.data.qdqk;
          //this.cqqk = res.data.data.cqqk;
          if (this.cqqk !== "" && this.cqqk.length > 0) {
            this.cqqkTitle = "今日出勤情况：";
          }
        })
        .catch(err => {
          this.$message.error("首页数据获取失败");
        });
    },
    getData2() {
      this.$axios
        .get("/api/today/getGgctCount?p=" + this.$store.state.power)
        .then(res => {
          this.pernum=res.data.data;
        })
        .catch(err => {
          this.$message.error("数据获取失败");
        });
    },
    //获取数据列表
    searchList(cpage) {
      this.tableData = [];
      this.searchCount = "查询中...";
      this.currpage = cpage;
      let startTime = "",
        endTime = "",
        filter = [],
        bmList = [],
        textKey = this.textSearch,
        pageSize = this.pagesize,
        pageNum = cpage;

      //日期
      if (this.flag == false && this.dateValue !== "") {
        startTime = this.dateFt2(null, null, this.dateValue[0]);
        endTime = this.dateFt2(null, null, this.dateValue[1]);
      }
      //筛选部门
      if (this.bm.length > 0 && this.$store.state.power <= 0) {
        bmList = this.bm;
      }
      //查询请求
      this.$axios
        .post("/api/qiandao/getList?p=" + this.$store.state.power, {
          status: this.status,
          startTime,
          endTime,
          filter,
          bmList,
          textKey,
          pageSize,
          pageNum
        })
        .then(res => {
          this.pagesizeCount = res.data.data.count;
          this.searchCount = `共查询到 ${this.pagesizeCount} 条数据`;
          this.tableData = res.data.data.list;
        })
        .catch(err => {
          this.$message.error("查询失败");
          this.searchCount = `查询失败`;
        });
    },
    //日期搜索格式转换函数
    dateFt(row, column, time) {
      let date = new Date(time.replace(/-/g, "/"));
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 <= 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + 1 <= 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    //列表日期格式2
    dateFt2(row, column, cellValue) {
      let date = new Date(cellValue);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 <= 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + 1 <= 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    //列表日期格式
    dateFormat(row, column, cellValue) {
      //兼容IE,.replace(/-/g,'\/')
      let date = new Date(cellValue.replace(/-/g, "/"));
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 <= 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() + 1 <= 10 ? "0" + date.getDate() : date.getDate()) +
        " ";
      let h =
        (date.getHours() + 1 <= 10 ? "0" + date.getHours() : date.getHours()) +
        ":";
      let m =
        (date.getMinutes() + 1 <= 10
          ? "0" + date.getMinutes()
          : date.getMinutes()) + ":";
      let s =
        (date.getSeconds() + 1 <= 10
          ? "0" + date.getSeconds()
          : date.getSeconds()) + " ";
      return Y + M + D + h + m + s;
    },
    getTime() {
      let date = new Date();
      let day = "";
      switch (date.getDay()) {
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
        default:
          day = "星期日";
      }
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 <= 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() + 1 <= 10 ? "0" + date.getDate() : date.getDate()) +
        " ";
      let h =
        (date.getHours() + 1 <= 10 ? "0" + date.getHours() : date.getHours()) +
        ":";
      let m =
        (date.getMinutes() + 1 <= 10
          ? "0" + date.getMinutes()
          : date.getMinutes()) + ":";
      let s =
        (date.getSeconds() + 1 <= 10
          ? "0" + date.getSeconds()
          : date.getSeconds()) + " ";
      this.time = Y + M + D + h + m + s + day;
    },

    //切换页数
    getNewlist(cpage) {
      this.searchList(cpage);
    },
    // 表头样式设置
    headClass() {
      return "background-color:rgb(245, 245, 245);color:#383838;text-align:center;";
    },
    // 单元格样式
    tableClass() {
      return "color:#808080;text-align:center;";
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .title {
    display: flex;
    margin-top: 20px;
    h3 {
      color: #0075a9;
    }
    .btnBox {
      display: flex;
      margin-left: 300px;
      p {
        border: 1px solid #eee;
        background-color: #eee;
        cursor: pointer;
        font-size: 14px;
        padding: 6px;
        color: #606060;
        &:hover {
          text-decoration: underline;
          opacity: 0.9;
        }
      }
      .p-active {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
  .time {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    p {
      margin-right: 4px;
    }
  }
  .one {
    display: flex;
    margin-top: 10px;
    border-left: 1px solid rgb(215, 215, 215);
    flex-wrap: wrap;
    .box {
      flex: 1;
      box-sizing: border-box;
      height: 80px;
      border: 1px solid rgb(215, 215, 215);
      border-left: none;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      p {
        color: #383838;
      }
      .number {
        color: #409eff;
        font-size: 24px;
      }
    }
    .box2 {
      min-width: 20%;
    }
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    padding-left: 4px;
    margin-top: 10px;
    .el-date-editor {
      width: 280px;
    }
    .bmtype {
      span {
        margin-right: -20px;
        font-size: 14px;
        color: #383838;
      }
      .bm-input {
        width: 170px;
      }
    }
    .picker {
      margin-left: -20px;
    }
    .textSearchSun {
      display: flex;
      justify-content: space-between;
      width: 240px;
    }
  }
  .searchCount {
    display: flex;
    justify-content: space-between;
    height: 20px;
    margin-top: 4px;
    font-size: 16px;
    color: #383838;
  }
  .dataList {
    margin-top: 8px;
    position: relative;
  }
  .tip {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 34px;
    width: 100px;
    height: 80px;
    font-size: 14px;
    border: 1px solid #808080;
    background-color: #fff;
    padding: 4px;
    color: #383838;
  }
  .pager {
    margin-top: 20px;
    margin-left: 300px;
    margin-bottom: -80px;
  }
}
</style>